<template>
  <div class="main-container">
    <Navbar></Navbar>
    <div class="head-container">
      <el-row>
        <el-col :span="12">
          <el-button size="small" style="width: 100px;margin-right: 10px" class="filter-item" @click="">零件</el-button>
          <el-button size="small" style="width: 100px" class="filter-item" @click="">装配树</el-button>
          <el-button size="small" style="width: 100px" class="filter-item" @click="">大图显示</el-button>
        </el-col>

        <el-col :span="12">

            <el-select  placeholder="零件" size="small" style="width: 200px" class="filter-item" clearable @change="">
              <el-option
                v-for="item in supplierList"
                :key="item.id"
                :label="item.name"
                :value="item.id*1"
              />
            </el-select>
            <el-input
              v-model="roleName"
              size="small"
              clearable
              placeholder=""
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="doQuery"
            />
            <el-button
              class="filter-item"
              size="mini"
              type="success"
              icon="el-icon-search"
              @click=""
            >搜索</el-button>

          <div style="display:inline;margin-left:30px"> 过滤器：</div>
            <el-button size="medium " style="width: 100px;" class="filter-item" @click="">开启</el-button>
            <el-button size="medium " style="width: 100px;" class="filter-item" @click="">关闭</el-button>
            <el-button size="medium " style="width: 100px;" class="filter-item" @click="change">大图</el-button>
            <el-button size="medium " style="width: 100px;" class="filter-item" @click="change">列表</el-button>
        </el-col>



      </el-row>
      <transition enter-active-class="animate__animated animate__slideInLeft"
       >
        <div class="imgDiv" v-if="showImgOrList">
          <div class="partsImg" v-for="(o, index) in 22" :key="o" >
            <img @click="toDetail" style="height:160px;width:218px" src="https://storage.googleapis.com/jlr-ve-racs-qa3-illustrations/va_images/jagenginecoolingsystem.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gcs-qa-file-transfer%40jlr-ve-racs-qa.iam.gserviceaccount.com%2F20230216%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20230216T061229Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=1aa45fa8b6c732b7fe6cf3daadb0c948afff0c988df7be1af3b37ab12a1efc7869c1e83230dcb3d0b4614ff7e8d27443c9fa829e3de34255d384ba94acf54b36b6a618cfa1bf73dbaae5b2e6ee07308fd510257f5f7184e142caf0361d091865a6f13d6b427ada5a835933b1c5da47403f4cee9395583800fb61d82ecbb3682e2d77186ace4645713eb63baafaa7da895f94cc704cce5e14e688ac7beccb9cbd6a4af19647d405c1c8761c49b6422f9fc22e388d0778b4daaff9c5c93a2ea5d0e9576eedd4eaac828e51bae1992e46e28a192b436478624dfe9ef0195ad9e892bb2766a4b2121750e581ec4a0d83f893a64cd1f9d323936c873bbedaf0c0dc52" class="image">
          <!-- <embed style="height:160px;width:218px" type="image/svg+xml" src="https://storage.googleapis.com/jlr-ve-racs-qa3-illustrations/qy00003.svgz?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gcs-qa-file-transfer%40jlr-ve-racs-qa.iam.gserviceaccount.com%2F20230216%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20230216T071656Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=5063340903d356c3c1e2fe4dfb20073ceacd681112e5c2a53d42e549c2616bf6500faa5fbf2da774ef1851e41dd30b1904d35ffba142254dedda2c3eb87faeb450dd9d74fea14c8c1f69f09c8ee7b12ba0a6ca753989769b3f378dbb5fb1cbe00cd1a1e8013623f0eeac3cad5fbc734580bf14a5d8092a2525b490bede735fd7269165edcff4016366f2045e56f5d3b402b7631e5c8129c6433c63d78b741365700d6429ca60b1268716ed114b7d7f191bf559f0fdd37aad37620827e558e851deb18deb67e7b455b3afff3160340c677e9c960f2f7a593c474dbad0f6ba51713fe7cb9dd8a8fbbc9fbe95232f60a258b18951564aa15a43c628d6478ec8e191"></embed> -->
            <div class="m-img-text">
              <img style="width: 20px;height: 20px;" @click="dialogVisible = true" src="./lj.png" alt="">
              <div class="m-inner">
                我带着比身体重的行李，游入尼罗河底，经过几道闪电看到一堆光圈
              </div>

            </div>
            <!-- <el-card  :body-style="{ padding: '0px' }">

              <div style="padding: 14px;text-align:center">
                <span style="width:100%">零件展示</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>

                </div>
              </div>
            </el-card> -->
          </div>

        </div>
      </transition>

      <transition enter-active-class="animate__animated animate__slideInLeft">
        <div class="left-list-box" v-if="!showImgOrList">
          <div class="list-title">
            主要部分
          </div>
          <div class="list-item" v-for="(item,index) in tableData" :key="index" :class="{backGround:index==backGroundId}" @click="itemClick(index)">
            <div class="item-icon">
              <img src="./lj.png" width="20px" height="20px" alt="" srcset="" @click="dialogVisible = true">
            </div>
            <div class="item-text">
              {{item.name}}
            </div>
            <div class="item-right">
              >
            </div>
          </div>
        </div>
      </transition>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" style="margin-left: 10px !important;">确 定</el-button>
        </span>
      </el-dialog>


    </div>
    <!-- <div style="display: flex;width: 100%;">
      <div style="flex: 1;">
        <el-button size="small" type="text" style="width: 100px;margin-right: 10px" class="filter-item" @click="">零件</el-button>
        <el-button size="small" type="text" @click="">装配树</el-button>
        <el-button size="small" type="text" @click="">大图显示</el-button>
      </div>
      <div style="flex: 1;">

      </div>
    </div> -->

  </div>
</template>

<script>
  import Navbar from "@/layout/components/Navbar"
   export default{
     name:"photo",
     components:{
       Navbar
     },
    data(){
      return {
        dialogVisible:false,
        supplierList: [],
        form:{},
        roleName:"",
        currentDate: new Date(),
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentRow: null,
        backGroundId:null,
        showImgOrList:true
      }
    },
    methods:{
      doQuery() {
        var param = { roleName: this.roleName }
        if (this.createTime != null) {
          param.createTimeStart = Date.parse(this.createTime[0])
          param.createTimeEnd = Date.parse(this.createTime[1])
        }
        getRoleList(param).then(res => {
          if (res) {
            this.roles = res
          }
        })
      },

      toDetail(){
        console.log(this.$router)
        // this.$router.push({path: '/photo/detail'})
        this.$router.push({path: '/photo/imgDetail'})
      },
      itemClick(index){
        this.backGroundId = index;
      },
      change(){
        this.showImgOrList = !this.showImgOrList;
      },
       handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
            }
    }
  }
</script>

<style scoped lang="scss">
  .imgDiv{
    display: flex;
    flex-flow: row wrap;
    row-gap:30px;
    column-gap:20px;
    background: rgb(251, 250, 249);
  }
  .partsImg{
    margin: 10px 0;
    // margin:30px 30px;
    flex-direction: column;
    border: 0.5px solid $steamBoederColor;
  }
  .m-img-text{
    border-top: 0.5px solid $steamBoederColor;
    display: flex;
    align-items: center;
    padding: 20px 10px;
  }
  .partsImg:hover{
    background-color: $moseHoverColor;
  }
  .m-inner{
    width: 155px;
    margin-left: 20px;
    padding-left: 10px;
    font-size: 0.8rem;
    border-left: dashed 1px #e6dcbb;
  }
.time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

  .left-list-box{
      margin-top: 30px;
      margin-left: 50px;
      width: 30%;
    }
    .list-title{
      line-height: 40px;
      padding-left: 20px;
      font-weight: 600;
      background-color: #dbd3cb;
      font-size: 14px;
      color: rgb(0, 0, 0);
    }
    .list-item{
  /* #e2d5be */
      border-right:solid 1px #eabb84;
      border-bottom:solid 1px #eabb84;
      border-left:solid 1px #eabb84;

      display: flex;

    }
    .list-item:hover{
      background-color: $moseHoverColor;
    }
    .backGround{
      background-color: $moseHoverColor;
    }
    .item-icon,.item-right{
      flex: 1;
      display:flex;
      justify-content: center;
      align-items: center;

    }
    .item-text{
      width: 80%;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-left: 20px;
      border-left: dashed 1px #e6dcbb;
      color:#31734b;
      font-size: 14px;
    }

.animate__animated.animate__slideInLeft {
  --animate-duration: 0.5s;
}


</style>
